<template>
  <view class="container">
    <view class="title">{{ data.title }}</view>
    <view class="time">发布于{{ createtiem }}</view>
    <!-- <image :src="imgUrl + data.pic" mode="aspectFill" style="width: 690rpx; height: 460rpx; border-radius: 10rpx"></image> -->
    <rich-text v-if="data.content" :nodes="data.content | formatRichText"></rich-text>
    <view class="btnbox">
      <view class="item" @click="collect">
        <image :src="`../../static/icon/${data.follow == 2 ? 'collectact' : 'collect'}.png`" mode="aspectFill" style="width: 40rpx; height: 40rpx; margin-right: 14rpx"></image>
        <view>收藏</view>
      </view>
      <view class="item">
        <view>
          <button open-type="share">
            <image src="../../static/icon/share.png" mode="aspectFill" style="width: 40rpx; height: 40rpx; margin-right: 14rpx; vertical-align: middle"></image>
            分享
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';

export default {
  onShareAppMessage() {
    return {
      title: '文章分享',
      imageUrl: '/static/img/logo.png',
      path: '/parents/articledetail/articledetail?id=' + this.currentId
    };
  },
  data() {
    return {
      content: '',
      iscollect: false,
      imgUrl: '', // 图片的基地址
      data: {}, // 文章的数据
      createtiem: '', // 发布的时间
      currentId: '' // 当前文章的id
    };
  },
  methods: {
    // 收藏文章
    async collect() {
      // this.iscollect = !this.iscollect;
      // this.data.follow = '1';
      const res = await uni.$http.post('/follow/add', {
        type: '1',
        article_id: this.currentId
      });
      if (res.data.code == 1) {
        uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
        console.log('收藏的结果', res);
        this.getdetail(this.currentId);
      }
    },
    // 获取文章详情
    async getdetail(id) {
      const res = await uni.$http.post('/news/articleDetails', {
        article_id: id
      });
      console.log('文章详情数据', res);
      this.data = res.data.data.row;
      this.createtiem = dayjs(this.data.createtime * 1000).format('YYYY-MM-DD');
    }
  },
  onLoad(e) {
    console.log('文章详情的id', e.id);
    this.currentId = e.id;
    this.getdetail(e.id);
    // 配置图片的基地址
    this.imgUrl = this.imgurl;
  },
  filters: {
    // 处理富文本里的图片宽度自适应
    formatRichText(html) {
      //控制小程序中图片大小
      let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
        match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
        match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
        match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function (match, capture) {
        match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, '');
      newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
      return newContent;
    }
  }
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
button {
  padding: 0;
  margin: 0;
  border: none !important;
  font-size: 28rpx;
}
button::after {
  border: none !important;
}
.button-hover {
  background-color: transparent !important;
}
.container {
  box-sizing: border-box;
  padding: 20rpx 30rpx;
  padding-bottom: 120rpx;
  .title {
    font-weight: bold;
    font-size: 30rpx;
    color: #222222;
  }
  .time {
    font-weight: 500;
    font-size: 24rpx;
    color: #333333;
    margin: 20rpx 0;
  }
  .btnbox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 750rpx;
    height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #fff;
    .item {
      display: flex;
      align-items: center;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f8f8;
}
</style>
